<script type="text/javascript" src="{{$LAYOUT_HELPER_URL}}admin/js/ckeditor/ckeditor.js"></script> 
<script type="text/javascript" src="{{$LAYOUT_HELPER_URL}}admin/js/ckfinder/ckfinder.js"></script>  
<link href="{{$LAYOUT_HELPER_URL}}admin/js/jquery-ui/css/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="{{$LAYOUT_HELPER_URL}}admin/js/jquery-ui/js/jquery-ui.js"></script>
<script src="{{$LAYOUT_HELPER_URL}}admin/js/jquery.slug.js"></script>
<!-- Bootstrap -->

<script src="{{$LAYOUT_HELPER_URL}}admin/js/jquery.tmpl.min.js"></script>

<script src="{{$LAYOUT_HELPER_URL}}admin/js/bootstrap.file-input.js"></script>
<script src="{{$LAYOUT_HELPER_URL}}admin/js/init.js"></script>

<link href="{{$LAYOUT_HELPER_URL}}admin/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="{{$LAYOUT_HELPER_URL}}admin/css/style2.css" rel="stylesheet" />
<!--                       CSS                       -->

<link rel="stylesheet" href="{{$LAYOUT_HELPER_URL}}admin/css/reset.css"  type="text/css"  />

<link rel="stylesheet" href="{{$LAYOUT_HELPER_URL}}admin/css/style.css" type="text/css" />

<link rel="stylesheet" href="{{$LAYOUT_HELPER_URL}}admin/css/invalid.css"  type="text/css" /> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="{{$LAYOUT_HELPER_URL}}admin/js/jquery-1.9.1.js"></script>
<script src="{{$LAYOUT_HELPER_URL}}admin/js/jquery-ui.js"></script>


<link rel="stylesheet" type="text/css" href="{{$LAYOUT_HELPER_URL}}admin/css/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="{{$LAYOUT_HELPER_URL}}admin/css/jquery.multiselect.filter.css" />
<link rel="stylesheet" type="text/css" href="{{$LAYOUT_HELPER_URL}}admin/css/multiSelect.css" />

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" />

<script type="text/javascript" src="{{$LAYOUT_HELPER_URL}}admin/js/jquery.multiselect.js"></script>
<script type="text/javascript" src="{{$LAYOUT_HELPER_URL}}admin/js/jquery.multiselect.filter.js"></script>

<style>
    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }
    /* IE 6 doesn't support max-height
     * we use height instead, but this forces the menu to always be this tall
    */
    * html .ui-autocomplete {
        height: 100px;
        width:450px;
    }
</style>
<style>
    .custom-combobox {
        position: relative;
        display: inline-block;
    }
    .custom-combobox-toggle {
        position: absolute;
        top: 0;
        bottom: 0;
        margin-left: -1px;
        padding: 0;
        /* support: IE7 */
        *height: 1.7em;
        *top: 0.1em;
    }
    .custom-combobox-input {
        margin: 0;
        padding: 0.3em;
    }
</style>
<script>

</script>

<script type="text/javascript">

var allChaps = [];
//unchange
var htmlList = "<optgroup label='sort'>";
				
{{foreach from=$allCats item=item}}
				


 htmlList = htmlList + '<option  value="' + "{{$item.question_gid}}" + '" >' + "{{$item.title}}" + '</option>';
{{/foreach}}
 htmlList = htmlList + '</optgroup>'
     + "<optgroup label='list'>";
{{foreach from=$allCats item=item}}
 htmlList = htmlList + '<option  value="' + "{{$item.question_gid}}" + '" >' + "{{$item.title}}" + '</option>';
{{/foreach}}
 htmlList = htmlList + '</optgroup>';			

				
		
					
        // tam
        function split( val ) {
        return val.split( /,\s*/ );
    }
    function extractLast( term ) {
    return split( term ).pop();
}					
function showMenu() {
$("#unit").autocomplete( "search" , '' );
}
function submitBook()
{

$('input.chapter_titles').val(allChaps);
$('#submitFormQuestion').submit();
	
}


jQuery(document).ready(function (){ 
 
 
	
$( "#accordion" ).accordion({header: "> div > h3"}).sortable({
axis: "y",
handle: "h3",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});  	 
var availableUnit = new Array();
  	       
    {{foreach from=$allChapters item=item key=k}}
availableUnit[{{$k}}] = "{{$item.name}}";
    {{/foreach}}                 
$( "#unit" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableUnit, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
 	                
});   

    {{foreach from=$allQuestions item=item key=k}}
var sign = "question_" + "{{$item}}";
$('option.' + sign ).attr('selected',true);
// $("#question_chapter").val( {{$item}} ).prop('selected',true);
    {{/foreach}}      
	
    {{foreach from=$allLectures item=item key=k}}
		var sign = "lecture_" + "{{$item}}";
		$('option.' + sign ).attr('selected',true);
		// $("#question_chapter").val( {{$item}} ).prop('selected',true);
    {{/foreach}} 

  		{{foreach from=$allDemos item=item key=k}}
	      var sign = "demo_" + "{{$item}}";
	      //alert(sign);
		  $('option.' + sign ).attr('selected',true);
		 // $("#question_chapter").val( {{$item}} ).prop('selected',true);
		{{/foreach}} 

		{{foreach from=$allExercises item=item key=k}}
	      var sign = "exercise_" + "{{$item}}";
		  $('option.' + sign ).attr('selected',true);
		 // $("#question_chapter").val( {{$item}} ).prop('selected',true);
		{{/foreach}}
		
		$("select.multi").multiselect().multiselectfilter();
	 
	
	
        
});
    
	function addChap()
  	{
		var chap = $('input#unit').val();
		var html = "<p>"+ chap + "</p>";
		allChaps.push(chap);
		var t = $('select[name=data_question]').html();
				
		var newPanel='<div class="group"><h3><b>'+chap + '</b></h3><div >' + '<p><label>Question</label><select name="data['+ chap + '][]" multiple="multiple" style="width:370px">'	
		+ t +'</select><div class="full_text" style="margin-left:595px;"></div></p></div>';
						
							
		$('#accordion').append(newPanel).accordion('destroy').accordion({header: "> div > h3"}).sortable({
			axis: "y",
			handle: "h3",
			stop: function( event, ui ) {
			// IE doesn't register the blur when sorting
			// so trigger focusout handlers to remove .ui-state-focus
			ui.item.children( "h3" ).triggerHandler( "focusout" );
			}
		});
																
    {{foreach from=$allQuestions item=item key=k}}
		var sign = "question_" + "{{$item}}";
		$('option.' + sign ).attr('selected',true);
		// $("#question_chapter").val( {{$item}} ).prop('selected',true);
	{{/foreach}}      
	
    {{foreach from=$allLectures item=item key=k}}
		var sign = "lecture_" + "{{$item}}";
		$('option.' + sign ).attr('selected',true);
// $("#question_chapter").val( {{$item}} ).prop('selected',true);
    {{/foreach}} 

	{{foreach from=$allDemos item=item key=k}}
	      var sign = "demo_" + "{{$item}}";
		  $('option.' + sign ).attr('selected',true);
		 // $("#question_chapter").val( {{$item}} ).prop('selected',true);
	{{/foreach}}

	{{foreach from=$allExercises item=item key=k}}
      var sign = "exercise_" + "{{$item}}";
	  $('option.' + sign ).attr('selected',true);
	 // $("#question_chapter").val( {{$item}} ).prop('selected',true);
	{{/foreach}}
																	
$("select.multi").multiselect().multiselectfilter();
		

}  
</script>




<div class="content-box"><!-- Start Content Box -->

    <div class="content-box-header">

        <h3>Edit Chapter</h3>

        <div class="clear"></div>

    </div> <!-- End .content-box-header -->

    <div class="content-box-content">

        <form action="" method="post" id="submitFormQuestion">

            <!-- GENERAL -->
            <div class="tab-content id="tab0">

                 <!-- ERROR -->
                 {{if $errors|@count > 0}}
                 <div class="notification error png_bg">
                    <a href="#" class="close"><img src="{{$LAYOUT_HELPER_URL}}admin/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
                    <div>
                        {{if $errors.main}}
                        Error: {{$errors.main}}
                        {{else}}
                        Error: Please check following information again
                        {{/if}} 

                    </div>
                </div>
                {{/if}}





                <p>
                    {{foreach from=$allLangs item=item name=langDiv}}
                <p>
                    <label>Title</label>
                    <image style="vertical-align:middle;" src="{{$BASE_URL}}{{$item.lang_image}}"> {{$item.name}} 
                    <br> 
                    <input id="title" class="text-input small-input" type="text" style="width:364px;" name="data[{{$item.lang_id}}][name]" value="{{$data[$item.lang_id].name}}" />
                </p>
                {{/foreach}}
                </p>



            </div>
            <div>
            <p>
                <label>Category<span class="red">*</span></label>              
                <select name="data[subject_id]" class="small-input" style="width:380px">
                    {{foreach from=$allSubjects item=item}}
                    <option value="{{$item.content_category_gid}}" {{if $data.subject_id == $item.content_category_gid}}selected="selected"{{/if}}>{{$item.name}}</option>
                    {{/foreach}}
                </select> 
            </p>

           </div>
                	  
          <div>
                <p><label>Lecture</label>
                    <select name="data[lecture_ids][]" class="multi" multiple="multiple" style="width:380px">	
                        {{foreach from=$allCatLecture item=item}}	
                        <optgroup label="{{$item.group}}">

                            {{foreach from=$item.lectures item=item2}}	
                            <option class ="lecture_{{$item2.content_id}}" value="{{$item2.content_id}}"  >{{$item2.title}}</option>
                            {{/foreach}}
                        </optgroup>
                        {{/foreach}}

                    </select>

            </div>
            
            <div>
                <p><label>Question</label>
                    <select  name="data[question_ids][]" class="multi" multiple="multiple" style="width:380px">	
                        {{foreach from=$allCats item=item}}	
                        <optgroup label="{{$item.group}}">

                            {{foreach from=$item.questions item=item2}}	
                            <option class ="question_{{$item2.question_id}}" value="{{$item2.question_id}}"  >{{$item2.full_text}}</option>
                            {{/foreach}}
                        </optgroup>
                        {{/foreach}}

                    </select></p>
                   </div>
                      
 			 <div>
                <p><label>Demo</label>
                    <select name="data[folder_ids][]" class="multi" multiple="multiple" style="width:380px">	
                        {{foreach from=$allDemoCat item=item}}	
                        <optgroup label="{{$item.group}}">

                            {{foreach from=$item.folders item=item2}}	
                            <option class ="demo_{{$item2.folder_id}}" value="{{$item2.folder_id}}"  >{{$item2.title}}</option>
                            {{/foreach}}
                        </optgroup>
                        {{/foreach}}

                    </select>
                </p>
            </div>	  

            <div>
                <p><label>Exercise</label>
                    <select name="data[exercise_ids][]" class="multi" multiple="multiple" style="width:380px">	
                        {{foreach from=$allExerciseCat item=item}}	
                        <optgroup label="{{$item.group}}">

                            {{foreach from=$item.exercises item=item2}}	
                            <option class ="exercise_{{$item2.exercise_parameter_gid}}" value="{{$item2.exercise_parameter_gid}}"  >{{$item2.title}}</option>
                            {{/foreach}}
                        </optgroup>
                        {{/foreach}}

                    </select>
                </p>
            </div>	  
                <p>
                    <br/>
                    <input class="button" onclick="submitBook()" type="button" value="Save" />
                </p>
                <div class="clear"></div><!-- End .clear -->

            </div>  <!-- End GENERAL --> 
        </form>

    </div> <!-- End .content-box-content -->

</div> <!-- End .content-box -->



